import React, { useState } from 'react';
import './Wallet.css'
import TopBar from '../TopBar/TopBar';
import BlankCom from '../BlankCom/BlankCom';

export default function Wallet(props) {
    const [blanktitle, setblanktitle] = useState("");
    const [blankcontent, setblankcontent] = useState("");
    const [blankshow, setblankshow] = useState(0);
    const [rechargeshow, setrechargeshow] = useState(0);
    function showBlankCom(title, content) {
        setblanktitle(title);
        setblankcontent(content);
        setblankshow(1);
    }
    function hideBlankCom() {
        setblankshow(0);
    }
    function showrecharge() {
        setrechargeshow(1)
    }
    function hiderecharge() {
        setrechargeshow(0)
    }
    return (
        <div className={'walletbox ' + (props.show ? "show" : "")}>
            <BlankCom title={blanktitle} content={blankcontent} show={blankshow} hideBlankCom={hideBlankCom} />
            <TopBar title="账户" back={props.hidewallet} />
            <div className="walletcontentbox">
                <div className="money">2.82</div>
                <p className="moneytips">充值币 0.00 赠币 2.82</p>
                <div className="recharge" onClick={showrecharge}>充值</div>
                <div className="hr"></div>
                <div className="walletclickbox" onClick={() => showBlankCom("已购内容", "暂无购买内容")}>
                    <div className="leftbox">已购内容</div>
                    <i className='iconfont icon-you'></i>
                </div>
                <div className="walletclickbox" onClick={() => showBlankCom("交易记录", "暂无交易记录")}>
                    <div className="leftbox">交易记录</div>
                    <i className='iconfont icon-you'></i>
                </div>
                <div className="walletclickbox" onClick={() => showBlankCom("赠送记录", "暂无赠送记录")}>
                    <div className="leftbox">赠送记录</div>
                    <i className='iconfont icon-you'></i>
                </div>
                <div className="walletclickbox" onClick={() => showBlankCom("自动购买", "暂无自动购买书籍")}>
                    <div className="leftbox">自动购买</div>
                    <i className='iconfont icon-you'></i>
                </div>
            </div>
            <div className="walletcontentbox second">

                <div className="walletclickbox" onClick={() => showBlankCom("纸书币", "暂无纸书币记录")}>
                    <div className="leftbox">纸书币</div>
                    <i className='iconfont icon-you'></i>
                </div>
                <div className="walletclickbox" onClick={() => showBlankCom("纸书券", "暂无可用的纸书券")}>
                    <div className="leftbox">纸书券</div>
                    <i className='iconfont icon-you'></i>
                </div>
            </div>
            <div className={"rechargebg " + (rechargeshow ? "show" : "")} onClick={hiderecharge}>

            </div>
            <div className={"rechargecontent " + (rechargeshow ? "show" : "")}>
                <div className="rechargeflexbox">
                    <div className="rechargeminbox">
                        <div className="title">3.00</div>
                        <div className="rmbbutton">3元</div>
                    </div>
                    <div className="rechargeminbox">
                        <div className="title">6.00</div>
                        <div className="rmbbutton">6元</div>
                    </div>
                </div>
                <div className="rechargeflexbox">
                    <div className="rechargeminbox">
                        <div className="title">12.00</div>
                        <div className="rmbbutton">12元</div>
                    </div>
                    <div className="rechargeminbox">
                        <div className="title">30.00</div>
                        <div className="rmbbutton">30元</div>
                    </div>
                </div>
                <div className="rechargeflexbox">
                    <div className="rechargeminbox">
                        <div className="title">50.00</div>
                        <div className="rmbbutton">50元</div>
                    </div>
                    <div className="rechargeminbox">
                        <div className="title">98.00</div>
                        <div className="rmbbutton">98元</div>
                    </div>
                </div>
            </div>

        </div>
    );
}
